<template>
	<view class="pageview flex flex-direction">
		<account-info></account-info>
		<view class="list flex flex-wrap justify-between">
			<view class="item" @tap="navTo('/pages/count/f2pro')">
				<view class="title flex align-center">
					<view class="icon icon1">
						<image src="/static/home/icon01.png" mode="widthFix"></image>
					</view>
					<view>体重体脂</view>
				</view>
				<view class="item-bd">
					<view class="num">
						<text>{{ weightInfo.weightData || '--' }}</text>
						<text class="unit">公斤</text>
					</view>
					<view class="charts-box">
						<weightChart v-if="weightChartData.categories && weightChartData.categories.length > 0" :weightChartData="weightChartData"></weightChart>
					</view>
					<view class="time">{{ timeFormat(weightInfo.createTime) }}</view>
				</view>
			</view>
			<view class="item" @tap="navTo('/pages/count/bp2pro')">
				<view class="title flex align-center">
					<view class="icon icon2">
						<image src="/static/home/icon02.png" mode="widthFix"></image>
					</view>
					<view>血压</view>
				</view>
				<view class="item-bd">
					<view class="num">
						<text>{{ BP2AInfo.systolic_pressure || '' }}/{{ BP2AInfo.diastolic_pressure || '' }}</text>
						<text class="unit">mmHg</text>
					</view>
					<view class="charts-box flex align-center">
						<bp-step :systolic_pressure="BP2AInfo.systolic_pressure" :diastolic_pressure="BP2AInfo.diastolic_pressure"></bp-step>
					</view>
					<view class="time">
						<text>{{ timeFormat(BP2AInfo.createTime) }}</text>
						<text class="u-m-l-16">{{ BP2AInfo.ptype || '' }}</text>
						<!-- 重度，中度，轻度，正常高值，正常，偏低 -->
					</view>
				</view>
			</view>
			<view class="item" @tap="navTo('/pages/count/O2pro')">
				<view class="title flex align-center">
					<view class="icon icon3">
						<image src="/static/home/icon03.png" mode="widthFix"></image>
					</view>
					<view>血氧饱和度</view>
				</view>
				<view class="item-bd">
					<view class="num">
						<text>{{ O2Info.spo2 || '--' }}</text>
						<text class="unit">%</text>
					</view>
					<view class="charts-box flex align-center">
						<O2-step :spo2="O2Info.spo2"></O2-step>
					</view>
					<view class="time">
						<text>{{ timeFormat(O2Info.createTime) }}</text>
						<text></text>
					</view>
				</view>
			</view>
			<view class="item" @tap="navTo('/pages/count/erpro')">
				<view class="title flex align-center">
					<view class="icon icon5">
						<image src="/static/home/icon05.png" mode="widthFix"></image>
					</view>
					<view>心电图</view>
				</view>
				<view class="item-bd">
					<view class="charts-box charts-box-lg">
						<ecgChart :ecgChartData="ecgChartData"></ecgChart>
					</view>
					<view class="time">{{ timeFormat(ecgInfo.createTime) }}</view>
				</view>
			</view>
			<view class="item">
				<view class="title flex align-center">
					<view class="icon icon4">
						<image src="/static/home/icon04.png" mode="widthFix"></image>
					</view>
					<view>运动管理</view>
				</view>
				<view class="item-bd">
					<view class="num">
						<text>1286</text>
						<text class="unit">卡路里</text>
					</view>
					<view class="charts-box">
						<qiun-data-charts inScrollView :canvas2d="true" type="area" :opts="opts2" :chartData="chartData" />
					</view>
					<view class="time">11.12</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import mixin from '@/common/mixin.js';
import accountInfo from './components/accountInfo.vue';
import weightChart from './components/weightChart.vue';
import ecgChart from './components/ecgChart.vue';
import bpStep from '@/components/bpStep';
import O2Step from '@/components/O2Step';
import { mapState } from 'vuex';
export default {
	mixins: [mixin],
	data() {
		return {
			weightInfo: {},
			BP2AInfo: {},
			O2Info: {},
			weightChartData: {},
			ecgChartData: {
				categories: [],
				series: [
					{
						name: '心电',
						data: []
					}
				]
			},
			ecgInfo: {},
			chartData: {
				categories: [1, 2, 3, 4, 5],
				series: [
					{
						name: '运动',
						data: [10, 12, 11, 9, 8]
					}
				]
			},
			opts2: {
				color: ['#fe6f09'],
				padding: [15, 0, 15, 0],
				enableScroll: false,
				dataLabel: false,
				legend: {
					show: false
				},
				xAxis: {
					disabled: true,
					axisLine: false
				},
				yAxis: {
					disabled: true,
					disableGrid: true
				},
				extra: {
					tooltip: {
						splitLine: false,
						showBox: false
					},
					area: {
						type: 'curve',
						opacity: 0.2,
						addLine: true,
						width: 2,
						gradient: true,
						activeType: 'hollow'
					}
				}
			}
		};
	},
	components: {
		accountInfo,
		weightChart,
		ecgChart,
		bpStep,
		O2Step
	},
	computed: {
		...mapState(['curAccount'])
	},
	watch: {
		'curAccount.detailId': {
			handler(newValue, oldValue) {
				if (this.curAccount.detailId) {
					this.getBP2AData(this.curAccount.detailId);
					this.getWeightData(this.curAccount.detailId);
					this.getO2AData(this.curAccount.detailId);
					this.findEcgFirstPage(this.curAccount.detailId);
				}
			},
			immediate: true
		}
	},
	onPageScroll(e) {
		this.pageScrollTop = e.scrollTop;
	},
	created() {},
	onShow() {
		this.isShow = 1;
	},
	onHide() {
		this.isShow = 0;
	},
	onLoad() {},
	// 下拉刷新
	onPullDownRefresh() {
		if (this.curAccount.detailId) {
			this.getBP2AData(this.curAccount.detailId);
			this.getWeightData(this.curAccount.detailId);
			this.getO2AData(this.curAccount.detailId);
			this.findEcgFirstPage(this.curAccount.detailId);
		}
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 300);
	},

	methods: {
		timeFormat(time) {
			if (time) {
				return this.$u.timeFormat(time, 'mm.dd');
			} else {
				return '--';
			}
		},
		getBP2AData(detailId) {
			this.$postAction(this.$deviceapi.getBP2AData + '?detailId=' + detailId).then(da => {
				this.BP2AInfo = {
					...da
				};
			});
		},
		getO2AData(detailId) {
			this.$postAction(this.$deviceapi.getO2AData + '?detailId=' + detailId).then(da => {
				this.O2Info = {
					...da
				};
			});
		},
		getWeightData(detailId) {
			this.$postAction(this.$deviceapi.getWeightData + '?detailId=' + detailId).then(da => {
				let categories = [],
					data = [];
				if (da && da.length > 0) {
					da.forEach(item => {
						item.weightData = parseFloat(item.weightData.toFixed(2));
						categories.push(item.createTime);
						data.push(item.weightData);
					});
				}
				let res = {
					categories: categories,
					series: [
						{
							name: '体重',
							data: data
						}
					]
				};
				this.weightChartData = JSON.parse(JSON.stringify(res));
				this.weightInfo = da && da.length > 0 ? da[da.length - 1] : {};
			});
		},
		findEcgFirstPage(detailId) {
			this.$postAction(this.$deviceapi.findEcgFirstPage + '?detailId=' + detailId).then(da => {
				let categories = [],
					data = [],
					createTime = '';
				if (da && da.length > 0) {
					for (let i = 0; i < da.length; i++) {
						let list = da[i].data;
						if (list && list.length > 0) {
							list.forEach((item, index) => {
								categories.push(index);
								data.push(item);
							});
						}
					}
					createTime = da[da.length - 1].createTime;
				}

				let res = {
					categories: categories.splice(-1000),
					series: [
						{
							name: '心电',
							data: data.splice(-1000)
						}
					]
				};
				this.ecgChartData = JSON.parse(JSON.stringify(res));
				this.ecgInfo = {
					createTime
				};
			});
		},
		navTo(path) {
			this.$Router.push(path);
		}
	}
};
</script>
<style scoped lang="scss">
.pageview {
	height: 100vh;
	background: #f7f7fc;

	.list {
		margin: 20upx 30upx 0;

		.item {
			background: #fff;
			border-radius: 16upx;
			padding: 26upx;
			width: calc(50% - 20rpx);
			margin-bottom: 20upx;
			color: #333;
		}

		.title {
			font-size: 32upx;
			font-weight: 600;
		}

		.icon {
			border-radius: 100%;
			height: 50upx;
			width: 50upx;
			margin-right: 20upx;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				display: block;
				width: 35upx;
				height: 35upx;
			}

			&.icon1 {
				background: #00cca9;
			}

			&.icon2 {
				background: #ff5949;
			}

			&.icon3 {
				background: #fe3770;
			}

			&.icon4 {
				background: #fd7c1e;

				image {
					display: block;
					width: 30upx;
					height: 30upx;
				}
			}

			&.icon5 {
				background: #d0425a;
			}
		}

		.item-bd {
			margin-top: 20upx;

			.num {
				font-size: 42upx;
			}

			.unit {
				font-size: 30upx;
				color: #666;
				margin-left: 10upx;
			}

			.time {
				font-size: 30upx;
				color: #666;
			}

			.charts-box {
				height: 160upx;

				&.charts-box-lg {
					height: 210upx;
				}

				bp-step,
				O2-step {
					display: block;
					width: 100%;
				}
			}

			.steps {
				.step {
					width: 40upx;
					height: 10upx;
					margin-left: 2upx;
					border-radius: 50upx;
				}
			}
		}
	}
}
</style>
<style>
@keyframes animal {
	0% {
		transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		-webkit-transform: rotate(360deg);
	}
}
</style>
